<template>
	<view>
		<page-head headTitle="需求订单" :returnButton="true" @clickLeftReturn="clickLeftReturn"></page-head>
		
		<view class="flex height align-center border-botton bg-white details-top fixed customlist-lr">
					<view @click="changen(index)" class="flex-1 flex justify-content fs-g" 
					v-for="(item,index) in tabBar" :key="index" :class="tabIndex===index?'order-bj':''">
						<text class="order-text">{{item.name}}</text>
					</view>	
				</view>
		<view class="customlist-mt">
			<view class="m bg-white">	
				<view>
					<view v-for="(itemList,index) in list" v-show="tabIndex==index">
						<view class="border-botton2" v-for="(v_item,v_index) in itemList" :key="v_item.sn">
							<view class="p-t-b4 border-botton p-l-r3" @tap="goDetails" :data-sn="v_item.sn">
								<view class="flex justify-between align-center">
									<image :src="v_item.user.avatar" class="book-image border-r1 mr"></image>
									<view class="flex-1">
										<view class="flex align-start justify-between">
											<view class="flex align-center">
												<text class="fs-3">{{v_item.user.user_nickname}}</text>
												<text class="iconfont icon-message book-icon" @tap.stop="goChat" :data-id="v_item.user.id"></text>
											</view>
											<!-- <text class="color-blue">{{v_item.status_text}}</text> -->
										</view>
									</view>
								</view>
								<view class="flex fs-3 m-t-3 p-l2 color-c justify-between">
									<view class="flex">
										<view>
											<text>需求描述：</text>
											<text>{{v_item.demands}}</text>
										</view>
										
									</view>
								</view>	
							</view>
							
						</view>	
					</view>
				</view>
			</view>	
	    </view>
	</view>
</template>

<script>
import pageHead from '@/components/common/page-head.vue'
	export default {
		components:{
			pageHead
		},
		data() {
			return {
				tabIndex:0,
				tabBar:[
					{name:'全部'},
					{name:'已评价'}
				],
				keyword:'',
				list:[{},{}],
				showList:[[],[]],
				pages:[
					{page:1},
					{page:1}
				],
				last:[
					{isLast:0},
					{isLast:0}
				],
				onload:0,
				loadingText:'',
				showNav:true,
				showIcon:false
			}
		},
		onLoad() {
			this.getList();
		},
		onReachBottom() {
			if(this.onload !=1){ 
				this.getList(this.tabIndex, 1); //下一页
			}
		},
		methods: {
			changen(index){
				this.tabIndex = index;
				this.loadingText = '';
				if(this.pages[index].page == 1 && this.last[index].isLast === 0 && this.list[index].length == 0){
					this.getList(index);
					//console.log(this.getList(index));
				}
				
			},
			clickLeftReturn(){
				uni.redirectTo({
					url: '../index/index'
				})
			},
			getList(index=0, next=0){
				if(this.last[index].isLast == 1){	
					return false;
				}
				var status;
				switch(index) {
				    case 0:
						status = 0;
				        break;
				    case 1:
				        status = 1;
				        break;
				    default:
				        status = 0;
				}
				var page = this.pages[index].page;
				if(next == 1){
					page+=1;
					if(this.onload == 1){
						return false;
					}
					this.onload = 1;
					this.loadingText = '加载中...';
					uni.showNavigationBarLoading();
				}
				this.$myRequest({
					method:'POST',
					url:'/api/guide/customizelist',
					data:{
						is_comment:status,
						page:page,	
					},
				}).then(res=>{
					console.log(res);
					if(res.data.code == 1){
						var result_list = res.data.data;
						if(next == 1){
							//下一页
							if(result_list == ''){
								this.last[index].isLast = 1;
								uni.hideNavigationBarLoading();
								this.loadingText = '已加载全部';
							}else{
								this.list[index] = this.list[index].concat(result_list);
								this.loadingText = '加载更多';
								this.pages[index].page = page;
								uni.hideNavigationBarLoading();
							}
							this.onload = 0;
							
						}else{
							//加载默认
							if(result_list == ''){
								//切换菜单栏，无订单时候显示占位图处
								this.last[index].isLast = 1;
								this.showIcon = true;
								this.showNav = false;
								//console.log(22);
							}else{
								this.showIcon = false;
								this.showNav = true;
								this.showList[index] = result_list;
								this.list = '';
								this.list = this.showList;
							}
										
						}
					}
				})
			},
			goDetails(e){
				var orderSn = e.currentTarget.dataset.sn;
				console.log(e);
				uni.navigateTo({
					url: '../order-details/order-details?sn='+orderSn,
				});
			},
			goChat: function(e) {
				uni.navigateTo({
				    url: '../../chatDetails/chatToUser?id='+e.currentTarget.dataset.id
				});
			}
		}
	}
</script>

<style scoped>
.search-icon{font-size: 60rpx;color: #AAAAAA;}
.book-image{width: 80rpx; height: 80rpx;}
.book-icon{font-size: 50rpx !important;line-height: 1.2;}
.book-fs{font-size: 20rpx;}
.cancel-content{top: 30%;left: 60rpx;right: 60rpx;border-radius: 20rpx; background-color: #FFFFFF;z-index: 2;}
.book-widht{width: 49.5%;}
.cancel-p{padding: 90rpx 40rpx;box-sizing: border-box;}
.cancel-res{border-left: 2rpx solid #DDDDDD;color: #FF4949;}
.refuse{color: #FFFFFF !important;background-color: #FF4141 !important;}
.customlist-mt{margin-top: 248rpx;}
.customlist-lr{left: 30rpx;right: 30rpx;}
</style>
